<template>
	<div class="zh-dress-up">
		<nav-header></nav-header>
		<div class="zh-tab">
			<div class="zh-t-nav clear">
                <span
                    :class="acticePanel === 'header' ? 'is-active' : ''"
                    @click="changePanel('header')"
                >页头设置</span>
			<!-- 	<span 
				:class="$route.params.id === 'layout' ? 'is-active' : ''"
				@click="layoutClick">布局设置</span> -->
				<span 
				:class="acticePanel === 'footer' ? 'is-active' : ''" 
				@click="changePanel('footer')">页脚设置</span>
				<span 
				:class="acticePanel === 'sowing' ? 'is-active' : ''"
				@click="changePanel('sowing')">轮播图设置</span>
				<span 
				:class="acticePanel === 'notice' ? 'is-active' : ''"
				@click="changePanel('notice')">公告管理</span>
				<span 
				:class="acticePanel === 'info' ? 'is-active' : ''"
				@click="changePanel('info')">基础信息</span>

				<div v-if="!$store.state.checkLevel" class="nav-op fr">
					<label>
						<span>一键置灰</span>
						<el-switch v-model="grayStatus" @change="setGray" active-color="#3bb080" inactive-color="#d8d8d8"></el-switch>
					</label>
				</div>
			</div>
			<div class="zh-t-list">
                <transition name="fade" mode="in-out">
                    <div v-if="acticePanel === 'header' ? true : false">
                        <zhHeader />
                    </div>
                </transition>
				<transition name="fade" mode="in-out">
					<div v-if="acticePanel === 'footer' ? true:false">
						<zhFooter></zhFooter >
					</div>
				</transition>
				<transition name="fade" mode="in-out">
					<div  v-if="acticePanel === 'sowing' ? true:false">
						<zhSowing></zhSowing>
					</div>
				</transition>
				<transition name="fade" mode="in-out">
					<div  v-if="acticePanel === 'notice' ? true:false">
						<zhNotice></zhNotice>
					</div>
				</transition>
				<transition name="fade" mode="in-out">
					<div  v-if="acticePanel === 'info' ? true:false">
						<zhInfo></zhInfo>
					</div>
				</transition>
			</div>
		</div>
	</div>
</template>

<script>
    import zhHeader from './zhHeader.vue';
	import zhFooter from './zhFooter'
	import zhSowing from './zhSowing'
	import zhNotice from './zhNotice'
	import zhInfo from './zhInfo'

  	export default {
  		components: {
            zhHeader,
						zhFooter,
						zhSowing,
						zhNotice,
						zhInfo
  		},
	    data() {
		    return {
						acticePanel: 'header',
				// acticePanel: 'footer',
          	grayStatus: false,
		    };
	    },
	    created(){
	    	this.getGray();
	    	if( !is_empty( this.$store.getters.activePanel ) ){
	    		this.acticePanel = this.$store.getters.activePanel;
	    		// this.$store.commit('SET_ACTIVEPANEL', null );
	    	}
	    },
	    mounted(){

        },
	    watch:{

        },
	    methods: {
	    	changePanel(panel){
	    		this.acticePanel = panel;
	    	},
	    	setGray(){
	    		const success = (res => {
                    console.log(this.grayStatus)
                    if (this.grayStatus === false) {
                        document.getElementsByTagName("body")[0].classList.remove("is-gray");
                    } else {
                        document.getElementsByTagName("body")[0].classList.add("is-gray");
                    }
                })

		    	this.$ajax.post('api/setting/gray',{status:this.grayStatus}, {func: {success: success}});
	    	},
		    getGray(){
		    	let success = ( data => {
		    		if(  data.data.status === null ){
		    			this.grayStatus = false;
		    		}else{
		    			this.grayStatus = data.data.status
		    		}
		    	})
		    	this.$ajax.get('api/setting/gray',{params: {},func:{success:success}});
		    }
	       
    	}
  	};
</script>
<style lang="scss">
	.zh-dress-up{
		.zh-t-nav {
			padding-top: 14px;
			padding-bottom: 36px;
			>span {
				float: left;
				padding: 7px 20px;
				border: 1px solid #e6e6e6;
				cursor: pointer;
				&:hover {
					color: #fff;
					background: #348EFC;
					border: 1px solid #348EFC;
				}
			}
			.is-active {
				color: #fff;
				background: #348EFC;
				border: 1px solid #348EFC;
			}
		}

		.nav-op{
			.is-active{
				background: none;
				border: 0;
				color: #409EFF;
			}
			.el-switch__input:focus~.el-switch__core{
				border: 0;
			}
			>label{
				line-height: 35px;
				margin-right: 40px;
				>span{
					margin-right: 5px;
				}
			}
			button{
				border: 0;
				border-radius: 3px;
				padding: 9px 30px;
			}
		}
	}
</style>